<template>
	<view class="">
		<view class="linear"></view>
		<view class="listbg">
			<!-- 买手任务已取消状态取消原因 -->
			<view class="cancelbox" v-if="fromData.task_type == 1 && fromData.status == 4">
				<text>已取消</text>
				<text>该订单客户已经取消,{{fromData.RefundInfo.refund_message || '暂无取消原因'}}</text>
			</view>
			<template v-if="fromData.task_type == 4">
				<!-- 买手任务已取消状态取消原因 -->
				<view class="cancelbox" v-if="fromData.status == 1">
					<text>退/换货待处理</text>
					<text>客户的订单正在申请退/换货，请准备好相应的货品</text>
				</view>
				<!-- 买手任务已取消状态取消原因 -->
				<view class="cancelbox" v-if="fromData.status == 2">
					<text>退/换货处理中</text>
					<text客户的订单正在申请退 /换货，请准备好相应的货品</text>
				</view>
				<!-- 买手任务已取消状态取消原因 -->
				<view class="cancelbox" v-if="fromData.status == 3">
					<text>退/换货处理完成</text>
					<text>该售后订单已处理完成</text>
				</view>
			</template>
			<!-- 收货信息 -->
			<view class="user" v-if="fromData.task_type == 1">
				<view class="" style="position: relative;">
					<text
						style="display: flex;align-items: center;">收货人:</text><text>{{fromData.groupOrder.real_name || '暂无'}}
						<text style="margin-left: 20rpx;">{{fromData.groupOrder.user_phone || '暂无联系电话'}} </text></text>
					<text class="call" style="top: -6rpx;" @click="call(fromData.groupOrder.user_phone)">拨打电话</text>
				</view>
				<view class="" style="margin-top: 20rpx;margin-bottom: 20rpx;"><text>预约时间:</text><text
						class="hong">{{fromData.groupOrder.delivery_day}}
						{{fromData.groupOrder.delivery_time_scope}}</text></view>
				<view class=""><text>收货地址:</text><text class="hui">{{fromData.groupOrder.user_address || '暂无地址'}}</text>
				</view>
			</view>
			<!-- 买手 -->
			<view class="" v-if="fromData.BuyerMyInfo">
				<view class="usualtitle">
					<text>买手信息</text>
					<text v-if="fromData.RefundInfo">系统派单</text>
					<text v-else>{{fromData.groupOrder.buyer_type ? '客户指定' : '系统派单'}}</text>
				</view>
				<view class="buyer">
					<image :src="fromData.BuyerMyInfo.avatar || ''" mode=""></image>

					<view class="">
						<view class="">
							<text>{{fromData.BuyerMyInfo.real_name || '暂无'}}</text>
							<text>{{fromData.BuyerMyInfo.phone || '暂无'}}</text>
						</view>
						<view class="">
							<text>{{fromData.groupOrder.orderListField[0].merchantField.marketField.address || '暂无'}}</text>
							<text @click="copy(fromData.BuyerMyInfo.phone)">复制</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 骑手 -->
			<view class="" v-if="fromData.BuyerSeeRiderInfo && fromData.BuyerSeeRiderInfo.uid">
				<view class="usualtitle">
					<text>骑手信息</text>
					<view class="loc" v-if="fromData.status != 3 && fromData.status != 4 ">
						<u-icon name="map" color="#F45E14" size="12"></u-icon>
						<text>当前距离{{dangqianjuli || '--'}}km</text>
					</view>
				</view>
				<view class="buyer">
					<image :src="fromData.BuyerSeeRiderInfo.avatar" mode=""></image>
					<view class="">
						<view class="">
							<text>{{fromData.BuyerSeeRiderInfo.real_name || '暂无'}}</text>
						</view>
						<view class="">
							<text>{{fromData.BuyerSeeRiderInfo.phone || '暂无'}}</text>
						</view>
					</view>
					<view class="call" @click="call(fromData.BuyerSeeRiderInfo.phone)">联系骑手</view>
				</view>
			</view>


			<!-- 骑手信息 为什么这样写？！-->
			<!-- <view class="" v-if="fromData.task_type == 1 && fromData.status == 3">
				<view class="usualtitle">
					<text>骑手信息</text>
					<view class="loc" v-if="fromData.status != 3 && fromData.status != 4 ">
						<u-icon name="map" color="#F45E14" size="12"></u-icon>
						<text>当前距离{{dangqianjuli || '--'}}km</text>
					</view>
				</view>
				<view class="buyer">
					<image :src="fromData.BuyerSeeRiderInfo.avatar" mode=""></image>
					<view class="">
						<view class="">
							<text>{{fromData.BuyerSeeRiderInfo.real_name || '暂无'}}</text>
						</view>
						<view class="">
							<text>{{fromData.BuyerSeeRiderInfo.phone || '暂无'}}</text>
						</view>
					</view>
					<view class="call" @click="call(fromData.BuyerSeeRiderInfo.phone)">联系骑手</view>
				</view>
			</view> -->
			<!-- 骑手信息 状态4 下的待接单 接单 接单完成-->
			<!-- <view class=""  v-if="fromData.task_type == 4 && ( fromData.status == 1|| fromData.status == 2|| fromData.status == 3)"> -->
			<!-- <view class="" v-if="fromData.task_type == 4 && fromData.BuyerSeeRiderInfo.length">
				<view class="usualtitle">
					<text>骑手信息</text>
				</view>
				<view class="buyer">
					<view class="">
						<view class="">
							<text>{{fromData.BuyerSeeRiderInfo.real_name || '暂无'}}</text>
						</view>
						<view class="">
							<text>{{fromData.BuyerSeeRiderInfo.phone || '暂无'}}</text>
						</view>
					</view>
					<view class="call">联系骑手</view>
					<view class="call" @click="copy(fromData.BuyerSeeRiderInfo.phone)">复制号码</view>
				</view>
			</view> -->
			<!-- 买手信息 -->
			<!-- <view class="" v-if="fromData.task_type == 1">
				<view class="usualtitle">
					<text>买手信息</text>
					<text>{{fromData.groupOrder.buyer_type ? '客户指定' : '系统派单'}}</text>
				</view>
				<view class="buyer">
					<image :src="fromData.BuyerMyInfo.avatar || ''" mode=""></image>

					<view class="">
						<view class="">
							<text>{{fromData.BuyerMyInfo.real_name || '暂无'}}</text>
							<text>{{fromData.BuyerMyInfo.phone || '暂无'}}</text>
						</view>
						<view class="">
							<text>{{fromData.groupOrder.orderListField[0].merchantField.marketField.address || '暂无'}}</text>
							<text @click="copy(fromData.BuyerMyInfo.phone)">复制</text>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 下面的商品信息 -->
			<view class="goodslist" style="padding-bottom: 30rpx; margin-top: 30rpx;">
				<view v-for="(item,index) in fromData.groupOrder.orderListField">
					<view class="usualtitle"
					v-if="fromData.RefundInfo == null "> 
						<text>{{item.merchantField.marketField.mar_name || '暂无'}}-{{item.merchantField.mer_name || '暂无'}}</text>
					</view>
					<view class="usualtitle" v-else-if=" kao_(fromData.RefundInfo ,item.mer_id ) ">
						<text>{{item.merchantField.marketField.mar_name || '暂无'}}-{{item.merchantField.mer_name || '暂无'}}</text>
					</view>

					<template v-if="fromData.task_type == 1 || fromData.task_type == 4">
						<view class="goodsbg" v-for="(ele,i) in item.orderProduct">
							<block
								v-if="(!fromData.currentRefundOrderProudctIds||
(fromData.currentRefundOrderProudctIds.length == 0|| fromData.currentRefundOrderProudctIds.indexOf(ele.order_product_id) != -1))">
								<view class="">
									<image :src="ele.cart_info.product.image" mode=""></image>
									<view class="itemrules">
										<view class="">
											<text>{{ele.cart_info.product.store_name}}</text><text>￥{{ele.cart_info.productAttr.ot_price || '0'}}</text><text>￥{{ele.cart_info.productAttr.price || '0'}}</text>
										</view>
										<text style="color: red;">
											{{ele.cart_info.productAttr.sku || ''}}
										</text>
										<text>x{{ele.product_num || '0'}}</text>
									</view>
									<view class="priceipt" v-if="fromData.status == 2"
										@click="getrealprice(ele,index,i,ele.chajia)">
										{{ele.chajia || '输入差价'}}
									</view>
								</view>
							</block>
						</view>
					</template>
				</view>
				<!-- 上面是循环 -->
				<template v-if="fromData.task_type == 1">
					<view @click="changeIs" class="openline">
						<text>共{{fromData.groupOrder.total_num}}件</text>
						<image v-if="isTrue" src="../static/icon_297@2x.png" mode=""></image>
						<image v-else src="../static/icon_298@2x(1).png" mode=""></image>
					</view>
					<view class="postage">
						<view class="">
							<text>包装费</text>
						</view>
						<text>￥{{bag_money || '0'}}</text>
					</view>
					<view class="postage">
						<view class="">
							<text>配送费</text>
						</view>
						<text>￥{{postage_money || '0'}}</text>
					</view>
					<view class="youhui">
						<view class="">
							<image src="../static/icon_138@2x.png" mode=""></image>
							<text>积分抵现</text>
						</view>
						<text>-￥{{jifendixian || '0'}}</text>
					</view>
					<view class="youhui">
						<view class="">
							<image src="../static/icon_139@2x.png" mode=""></image>
							<text>礼品卡</text>
						</view>
						<text>-￥{{fromData.groupOrder.card_price || 0}}</text>
					</view>
					<view class="youhui">
						<view class="">
							<image src="../static/icon_139@2x.png" mode=""></image>
							<text>红包</text>
						</view>
						<text>-￥{{platform_free_money || 0}}</text>
					</view>
					<view class="youhui">
						<view class="">
							<image src="../static/icon_139@2x.png" mode=""></image>
							<text>配送费红包</text>
						</view>
						<text>-￥{{platform_free_postage_money || 0}}</text>
					</view>
					<view class="youhui">
						<view class="">
							<image src="../static/icon_141@2x.png" mode=""></image>
							<text>优惠券</text>
						</view>
						<text>-￥{{youhuiquan || '0'}}</text>
					</view>
					<view class="realpay">
						<view class="" style="align-items: center;">
							<!-- v-if="yiyouhui > 0" -->
							已优惠
							<text>￥{{yiyouhui || '0'}}</text>
						</view>
						<view class="">实付金额￥<text>{{shijijine || '0'}}</text></view>
					</view>
					<view class="plus">
						<image src="../static/icon_148@2x.png" mode=""></image>
						<view class="">
							<image src="../static/vip.png" mode=""></image>
							<text> 尊贵的plus会员</text>
							<text> | 可为您节省￥{{vipMoney || '0'}}</text>
						</view>
					</view>
				</template>
			</view>
			<view class="" v-if="fromData.task_type == 1">
				<view class="usualtitle">
					<text>备注</text>
				</view>
				<view class="beizu">
					<view class=""><text>{{fromData.groupOrder.orderListField[0].mark || '暂无备注'}}</text></view>
				</view>
			</view>
			<view class="" v-if="fromData.task_type == 4">
				<view class="usualtitle">
					<text>配送信息</text>
				</view>
				<view class="beizu" style="display: flex;">
					<view style="width: 130px !important;">收货地址 :</view>
					<view style="margin-left: 20rpx;">
						{{fromData.groupOrder.real_name}}
						{{fromData.groupOrder.user_phone}}{{fromData.groupOrder.user_address || '暂无地址'}}
					</view>
				</view>
			</view>
			<view class="" v-if="fromData.task_type == 4">
				<view class="usualtitle">
					<text>申请原因</text>
				</view>
				<view class="beizu">
					<view class=""><text>{{fromData.RefundInfo.refund_message || '客户没有反应原因'}}</text></view>
				</view>
			</view>
			<view class="" v-if="fromData.task_type == 4">
				<view class="usualtitle">
					<text>申请凭证</text>
				</view>
				<view class="beizu2">
					<image v-for="(item,index) in fromData.RefundInfo.images" :src="item"></image>
				</view>
			</view>
			<view class="">
				<view class="usualtitle">
					<text>订单信息</text>
				</view>
				<view class="beizu">
					<view class="">
						<text>订单编号: {{fromData.groupOrder.group_order_sn || '暂无'}}</text>
						<text @click="copy(fromData.groupOrder.group_order_sn)">复制</text>
					</view>
					<view class=""><text>下单时间: {{fromData.groupOrder.pay_time || '暂无下单时间'}}</text></view>

				</view>
			</view>

		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="recive" v-if="fromData.status == 1" @click="atOnceBuy()">立即接单</view>
		<view class="recive" v-if="fromData.status == 2" @click="bangmaiwancheng">帮买完成</view>
		<view class="recive" v-if="fromData.status == 3" @click="gopj">查看评价</view>

		<!-- 实际价格 -->
		<u-popup :show="moneyshow" mode="center" :safeAreaInsetBottom='fasle' round='16rpx'>
			<view class="ipts">
				<text>商品差价</text>
				<input type="text" v-model="realprice" placeholder="请输入商品差价" />
				<view class="playbtn">
					<view @click="close">取消</view>
					<view @click="sure">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nameList: {

				},
				sub: '', //下标
				sub2: '', //下标2
				jifendixian: '', //积分抵现
				youhuiquan: '', //优惠券
				shijijine: '', //实际金额
				yiyouhui: '', //以优惠
				vipMoney: '', //vip优惠
				platform_free_money: 0, //平台满减红包 优惠金额
				platform_free_postage_money: 0, //平台免运费红包 金额
				postage_money: 0, //配送费
				bag_money: 0, //包装费
				weight_num: 0, //需要填差价的商品总数
				dangqianjuli: '--',
				isTrue: true, //控制展示数量
				fromData: {
					groupOrder: {
						orderListField: []
					}
				}, //获取的详情
				moneyshow: false,
				realprice: '', //实际价格
				realpriceList: [], //实际价格加上
				id: '', //任务id
				// 商品信息
				shoppingList: [], //商品
				data: '', //选中数据
				order_list: [], //购买完成
			}
		},
		onLoad(e) {
			if (e.id) {
				console.log(e.id, 'e.id');
				this.id = e.id;
			}
			//获取详情
			this.getDetail();
		},
		onShow() {

		},
		methods: {
			kao_(data, mer_id) {
				if (this.fromData.RefundInfo === null) {
					return false;
				}
				try {
					if (Object.is(this.fromData.RefundInfo) && 
					this.fromData.RefundInfo.mer_ids && 
					this.fromData.RefundInfo.mer_ids.indexOf(mer_id) != -1) {
						return true;
					} else {
						return false;
					}

				} catch (e) {
					//TODO handle the exception
				}
				return false;
			},
			/**
			 * 帮买完成
			 */
			bangmaiwancheng() {
				console.log(this.order_list)
				let x = ''
				let order_list = []
				let RefundIds = [] //退货订单商品id
				if (this.fromData.RefundInfo) { //退换货
					this.fromData.RefundInfo.refundProduct.forEach(refundProduct => {
						RefundIds.push(refundProduct.order_product_id)
					})
				}
				this.fromData.groupOrder.orderListField.forEach(orderListField => {
					orderListField.orderProduct.forEach(orderProduct => {
						if (RefundIds.length == 0) { //无退货
							order_list.push({
								order_id: orderListField.order_id,
								order_product_id: orderProduct.order_product_id,
								real_weight: 0, //前端无输入地方
								lack_weight_refund: Number(orderProduct.chajia) > 0 ?
									Number(orderProduct.chajia) : 0, //退差价金额
								buyer_remarks: '', //买手备注
							})
						} else if (RefundIds.indexOf(orderProduct.order_product_id) != -1) { //当前任务退货商品
							order_list.push({
								order_id: orderListField.order_id,
								order_product_id: orderProduct.order_product_id,
								real_weight: 0, //前端无输入地方
								lack_weight_refund: Number(orderProduct.chajia) > 0 ?
									Number(orderProduct.chajia) : 0, //退差价金额
								buyer_remarks: '', //买手备注
							})
						}
					})
				})
				if (!this.order_list.length) {
					x = '默认视为无差价'
				}

				uni.showModal({
					title: '提示',
					content: `${x} 确认帮买完成吗?`,
					success: res => {
						if (res.confirm) {
							this.$request('buyer/finish', {
								task_id: this.fromData.id,
								group_order_id: this.fromData.groupOrder.group_order_id,
								order_list,
							}, 'POST').then(ele => {
								console.log(ele, 'ele');
								if (ele.status == 200) {
									uni.showToast({
										title: '帮买成功',
										icon: 'none'
									});
									this.id = this.fromData.id
									this.getDetail();
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}, //帮买完成
			// 立即购买5
			atOnceBuy() {
				uni.requestSubscribeMessage({
					tmplIds: ['8weYiNMM30JxdGsHWDAVR8OZmtUFS0NtYHnmITPa_J4'],
					success: re => {
						uni.showModal({
							title: '提示',
							content: '确认接单吗?',
							success: res => {
								if (res.confirm) {
									this.$request('buyer/accept', {
										task_id: this.fromData.id,
									}, 'POST').then(ele => {
										console.log(ele, 'ele');
										if (ele.status == 200) {
											this.getDetail();
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					},
					fail: err => {
						uni.showModal({
							title: '提示',
							content: '确认接单吗?',
							success: res => {
								if (res.confirm) {
									this.$request('buyer/accept', {
										task_id: this.fromData.id,
									}, 'POST').then(ele => {
										console.log(ele, 'ele');
										if (ele.status == 200) {
											this.getDetail();
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})





			},
			changeIs() {
				this.isTrue = !this.isTrue;
			},
			//经纬度算距离
			// 根据经纬度计算距离
			getDistance(lat1, lng1, lat2, lng2) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: `https://restapi.amap.com/v4/direction/bicycling?origin=${lng1},${lat1}&destination=${lng2},${lat2}&key=c858b6921758e3f3400070929386564c`,
					}).then((response) => {
						console.log(response[1].data.data.paths[0].distance, 'ss');
						this.dangqianjuli = response[1].data.data.paths[0].distance * 1 / 1000
					}).catch(error => {});
				})
			},
			// 复制
			copy(text) {
				uni.setClipboardData({
					data: text + '',
					success: function() {
						console.log('a');
					}
				});
			},
			// 拨打电话
			call(num) {
				uni.makePhoneCall({
					phoneNumber: String(num),
					success() {

					},
					fail(res) {
						console.log(res);
					}
				})
			},
			//获取详情
			getDetail() {
				this.$request('buyer/task_details', {
					id: this.id,
				}, 'GET').then(res => {
					console.log(res, '详情res');
					if (res.status == 200) {
						this.fromData = res.data;
						this.getDistance(this.fromData.BuyerSeeRiderInfo.latitude,
							this.fromData.BuyerSeeRiderInfo.longitude,
							this.fromData.BuyerMyInfo.latitude,
							this.fromData.BuyerMyInfo.longitude
						);
						// 循环取数据
						console.log(this.fromData.groupOrder, '看看总单');
						let jifen = 0; //积分抵现
						let youhui = 0; //优惠券
						let shiji = 0; //实际金额
						let zongyouhui = 0; //总优惠
						let vip = 0; //vip总优惠
						let red_free = 0; //红包优惠
						let postage_free = 0; //免运费红包优惠
						let reduceMoeny = 0 //满件打折
						let weight_num = 0; //需退差价的商品总数
						this.fromData.currentRefundOrderProudctIds = [] //当前单子退换货order_proudct_id s 
						if (this.fromData.RefundInfo) {
							this.fromData.RefundInfo.refundProduct.forEach(refundProduct => {
								this.fromData.currentRefundOrderProudctIds.push(
									refundProduct.order_product_id)
							})
						}
						this.fromData.groupOrder.orderListField.forEach((i, e) => {
							i.orderProduct.forEach((i2, e2) => {
								if (i2.cart_info.product.vip_discount_price > 0)
									vip += Number(i2.cart_info.product.vip_discount_price)
								if (i2.cart_info.product.reduceMoeny > 0)
									reduceMoeny += Number(i2.cart_info.product.reduceMoeny)

								this.$set(
								this.fromData.groupOrder.orderListField[e].orderProduct[e2]
								, 'chajia', '');
								weight_num++
							})

						})
						// orderProduct
						this.jifendixian = Number(this.fromData.groupOrder.integral_price); //积分抵扣金额
						this.youhuiquan = Number(this.fromData.groupOrder.coupon_price); //优惠券优惠金额
						this.shijijine = this.fromData.groupOrder.pay_price;
						console.log(this.shijijine, '999999999999999999999999999999')
						this.platform_free_money =
							Number(this.fromData.groupOrder.total_free_money_sum); //满减红包优惠金额
						this.platform_free_postage_money =
							Number(this.fromData.groupOrder.total_free_postage_money_sum); //免运费红包免费金额
						this.yiyouhui = this.jifendixian + this.youhuiquan +
							this.platform_free_money +
							this.platform_free_postage_money;
						this.yiyouhui += vip; //vip打折优惠金额
						this.yiyouhui += reduceMoeny; //满减打折优惠金额
						this.yiyouhui += Number(this.fromData.groupOrder.card_price) //礼品卡抵扣金额
						this.yiyouhui = Number(this.yiyouhui).toFixed(2)
						this.vipMoney = this.fromData.groupOrder.order_total_vip_price;
						this.postage_money = this.fromData.groupOrder.total_postage
						this.bag_money = this.fromData.groupOrder.order_total_package_fee
						this.weight_num = weight_num;

						//买手任务
						if (res.data.task_type == 1) {
							switch (res.data.status * 1) {
								case 0:
									return '待指定';
								case 1:
									return uni.setNavigationBarTitle({
										title: "待帮买"
									});
								case 2:
									return uni.setNavigationBarTitle({
										title: "帮买中"
									});
								case 3:
									return uni.setNavigationBarTitle({
										title: "已完成"
									});
								case 4:
									return uni.setNavigationBarTitle({
										title: "已取消"
									});
							}
						}
						//买手换货任务
						if (res.data.task_type == 4) {
							uni.setNavigationBarTitle({
								title: "售后详情"
							})
						}
						// this.fromData = fromData
					}
				})
			},
			getrealprice(data, sub, sub2, chajia) {
				console.log(data, 'data', sub, sub2);
				this.sub = sub;
				this.sub2 = sub2;
				this.data = data;
				this.moneyshow = true
				this.realprice = chajia;
			},
			close() {
				this.moneyshow = false;
				this.realprice = '';
				this.id = '';
				this.data = '';
			},
			sure() {
				if (!this.realprice) {
					return uni.showToast({
						title: '请输入商品差价'
					})
				}
				this.moneyshow = false;
				console.log(this.data, '看看有没有');
				this.fromData.groupOrder.orderListField[this.sub].orderProduct[this.sub2].chajia = this.realprice;
				let shopData = {
					order_id: this.data.order_id,
					order_product_id: this.data.order_product_id,
					real_weight: this.data.real_weight,
					lack_weight_refund: this.realprice ? this.realprice : 0,
					buyer_remarks: this.data.buyer_remarks,
				}
				let arr = [...this.order_list];

				arr.forEach((op, ii) => {
					if (op.order_product_id == this.data.order_product_id) {
						this.order_list.splice(ii, 1)
						console.log(ii, this.order_list, '一样的');
					}
				})
				// let isshow = false ;
				this.order_list.push(shopData);
				console.log(this.order_list, '查看修改');
				this.realprice = '';
				this.id = '';
				this.data = '';
			},
			gopj() {
				let data = JSON.stringify(this.fromData);
				uni.setStorageSync('data55', data);
				uni.navigateTo({
					url: "/P_buyer/mine/evaluate_look"
				})
			},

		}
	}
</script>

<style>
	.cancelbox {
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		box-sizing: border-box;
		width: 690rpx;
		padding: 30rpx;
		position: relative;
		z-index: 5;
	}

	.cancelbox text:nth-of-type(1) {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.call {
		width: 124rpx !important;
		height: 44rpx;
		background: #FFFFFF;
		border: 1rpx solid #EEEEEE;
		border-radius: 22rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		position: absolute;
		right: 30rpx;
	}

	.loc {
		display: flex;
		align-items: center;
	}

	.loc text {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F45E14;
		margin-left: 8rpx;
	}

	.plus {
		width: 630rpx;
		height: 88rpx;
		position: relative;
		margin-left: 30rpx;
		margin-top: 6rpx;
		display: flex;
		align-items: flex-end;
	}

	.plus>view {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #4D2F12;
		position: relative;
		z-index: 2;
		margin-bottom: 20rpx;
		margin-left: 14rpx;
	}

	.plus>view image {
		width: 30rpx;
		height: 30rpx;
	}

	.plus>view text {
		margin-left: 6rpx;
	}

	.plus>view text:nth-of-type(1) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #4D2F12;
	}


	.plus>image {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.realpay {
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 60rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.realpay>view {
		display: flex;
		align-items: baseline;
	}

	.realpay>view:nth-of-type(1) text {
		font-size: 34rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F83535;
	}

	.realpay>view:nth-of-type(2) text {
		font-size: 40rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.postage {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 40rpx;

	}

	.postage>view {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.postage>text {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.youhui {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 40rpx;

	}

	.youhui>view {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.youhui>view image {
		width: 28rpx;
		height: 30rpx;
		margin-right: 14rpx;
	}

	.youhui>text {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F83535;
	}

	.openline {
		width: 630rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
		background: #FAFAFA;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}

	.openline>image {
		width: 16rpx;
		height: 10rpx;
	}

	.goodsbg>view {
		height: 170rpx;
		border-bottom: 1rpx solid #EEEEEE;
		width: 630rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.priceipt {
		position: absolute;
		width: 174rpx;
		height: 50rpx;
		background: #FFFFFF;
		border: 1rpx solid #FFCBB1;
		border-radius: 25rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F45E14;
		right: 0rpx;
		bottom: 10rpx;
	}

	.goodsbg>view:last-child {
		border-bottom: none;
	}

	.goodsbg>view>image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 12rpx;
		/* background: #18BC37; */
		margin-right: 16rpx;
	}

	.itemrules {
		display: flex;
		flex-direction: column;
		/* background-color: #109C7A; */
		flex: 1;
		box-sizing: border-box;
	}

	.itemrules>text {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 30rpx;
	}

	.itemrules>view {
		display: flex;
		align-items: center;
	}

	.itemrules>view>text:nth-of-type(1) {
		width: 200rpx;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}

	.itemrules>view>text:nth-of-type(2) {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		text-decoration: line-through;
		color: #999999;
		line-height: 6rpx;
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.itemrules>view>text:nth-of-type(3) {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.itemrules {}

	.recive {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		z-index: 99;
		background: linear-gradient(64deg, #2BCCA5, #22B591);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
	}

	.beizu {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
		padding: 30rpx;
		line-height: 40rpx;
	}

	.beizu>view {
		display: flex;
		justify-content: space-between;
	}

	.beizu>view text:nth-of-type(2) {
		color: #FC9448;
	}

	.beizu>view:nth-of-type(2) {
		/* margin-top: 16rpx; */
	}

	.buyer {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx;
		position: relative;
	}

	.buyer>image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		/* background: #18BC37; */
		margin-right: 16rpx;
	}

	.buyer>view {
		flex: 1;
	}

	.buyer>view>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.buyer>view>view:nth-of-type(1) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
	}

	.buyer>view>view:nth-of-type(2) {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
	}

	.buyer>view>view:nth-of-type(2) text:nth-of-type(2) {
		color: #F83535;
	}

	.usualtitle {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.beizu2 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 10rpx 10rpx 20rpx 10rpx;
	}

	.beizu2>image {
		width: 190rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin-right: 26rpx;
		margin-top: 20rpx;
	}

	.usualtitle text:nth-of-type(2) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F45E14;

	}

	.user {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.user>view {
		display: flex;
	}

	.user text:nth-of-type(1) {
		width: 140rpx;
		white-space: nowrap;
	}

	.hong {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #F83535;
	}

	.hui {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #666666;
		width: 500rpx;
	}

	.listbg {
		width: 690rpx;
		margin-left: 30rpx;
		position: relative;
		z-index: 3;
		padding-top: 50rpx;
	}

	.listbg>view {
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	page {
		background: #F5F5F5;
	}

	.ipts {
		width: 620rpx;
		height: 380rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	.linear {
		width: 750rpx;
		height: 280rpx;
		background: linear-gradient(180deg, #109C7A 0%, #F5F5F5 100%);
		position: fixed;
		top: 0;
	}

	.ipts>text {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		line-height: 34rpx;
	}

	.ipts input {
		width: 572rpx;
		height: 120rpx;
		background: #FFFFFF;
		border: 1rpx solid #CCCCCC;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding-left: 16rpx;
		margin-bottom: 42rpx;
		margin-top: 46rpx;
	}

	.playbtn {
		width: 100%;
		display: flex;
		height: 90rpx;
		border-top: 1rpx solid #EEEEEE;
	}

	.playbtn>view {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #999999;
		display: flex;
		width: 50%;
		height: 100%;
		align-items: center;
		justify-content: center;
	}

	.playbtn>view:nth-of-type(2) {
		border-left: 1rpx solid #EEEEEE;
		color: #F31E1E;
	}
</style>
